/**
 * Created by Administrator on 2017/3/15.
 */
var Password = require('../../../../src/libs/password');
var Button = require('../../../../src/libs/button');
var FormItem = require('../../../../src/libs/form-item');

var Strength = React.createClass({
    getInitialState:function(){
        return{
            level:this.props.level
        }
    },
    render:function(){
        return(
            <div className={"tips-wrap " + this.state.level.strength}>
                <span className="text-tips weak-span">弱</span>
                <span className="text-tips normal-span">中</span>
                <span className="text-tips strong-span">强</span>
            </div>
        )
    }
});

var Step2 = React.createClass({
    getDefaultProps:function() {
        return{
            pagedm:this.props.pagedm
        }
    },
    getInitialState:function(){
        return{
            password:PageDM.step2pwd,//新密码
            pwdStrength:PageDM.pwdStrength,//密码强度
            newPwd:PageDM.step2newPwd,//确认密码
            btnNext2:PageDM.btnNext2//下一步
        }
    },
    componentDidMount:function(){
        UEventHub.on(PageDM.pwdStrength.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT,function(v){
            console.log(v)
            this.refs.setStrength.setState({
                level:v
            })
        }.bind(this));
    },
    render:function(){
        return(
            <div className="form-reg reset-form">
                <FormItem label={<div><b>*</b>{this.state.password.label}</div>} dmbind={this.state.password.dmbind}>
                    <Password placeholder={this.state.password.placeholder} dmbind={this.state.password.dmbind}/>
                    {this.state.pwdStrength.value.show?
                        <Strength ref="setStrength" level={this.state.pwdStrength.value}/>:""
                    }
                </FormItem>
                <FormItem label={<div><b>*</b>{this.state.newPwd.label}</div>} dmbind={this.state.newPwd.dmbind}>
                    <Password placeholder={this.state.newPwd.placeholder} dmbind={this.state.newPwd.dmbind}/>
                </FormItem>
                <div className="form-group auto-height form-btn">
                    <label>&nbsp;</label>
                    <Button value="下一步" className="ucs-btn-confirm btn-width" onClick={this.state.btnNext2.onClick} dmbind={PageDM.btnNext2.dmbind}/>
                </div>
            </div>
        )
    }
});
module.exports = Step2;